.promo-notification {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    padding-top: 15px;
    animation: notify-show 0.3s ease-in;
    transition: 0.3s ease transform;

    &--close {
        animation: notify-show-reverse 0.3s ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes notify-show {
        0% {
            transform: translateY(200px);
        }

        100% {
            transform: translateY(0);
        }
    }

    @keyframes notify-show-reverse {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(200px);
        }
    }


    &__close {
        color: var(--gray700);
        cursor: pointer;
        position: absolute;
        top: -10px;
        right: 15px;

        @media (prefers-color-scheme: dark) {
            color: 2px solid var(--gray400);
        }
    }

    &__content {
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: center;
        background-color: var(--black);
        padding: 10px;
        font-size: 13px;

        @media (prefers-color-scheme: dark) {
            background-color: var(--gray100);
        }
    }

    &__title,
    &__btn {
        color: var(--white);

        @media (prefers-color-scheme: dark) {
            color: var(--black);
        }
    }
}

.light-mode {
    .promo-notification {
        &__close {
            color: 2px solid var(--gray700);
        }

        &__content {
            background-color: var(--black);
        }

        &__title,
        &__btn {
            color: var(--white);
        }
    }
}

.dark-mode {
    .promo-notification {
        &__close {
            color: 2px solid var(--gray400);
        }

        &__content {
            background-color: var(--gray100);
        }

        &__title,
        &__btn {
            color: var(--black);
        }
    }
}
